import { useState, useEffect } from "react";
import { useParams } from "react-router-dom";
import HeaderBar from "../../components/header/HeaderBar";
import VideoContainer from "./VideoContainer";

function LiliVideo({ loginAction }) {
  const { id } = useParams();
  const [barHeight, setBarHeight] = useState(0);
  const [isOver, setIsOver] = useState(false);

  useEffect(() => {
    window.addEventListener("scroll", handleScroll);

    // return window.removeEventListener("scroll", handleScroll);
  })

  useEffect(() => {
    setBarHeight(document.querySelector(".lili-header").clientHeight);
  }, [])

  const handleScroll = (e) => {
    let scrollTop = document.documentElement.scrollTop;
    if (scrollTop >= barHeight) {
      setIsOver(true);
    } else {
      setIsOver(false);
    }
  }
  return (
    <div>
      <HeaderBar subClass={" fixed-header"} loginAction={loginAction} />
      <VideoContainer BV={id} />
    </div>
  )
}

export default LiliVideo;